<template>
    <div v-loading="loading" class="Main">
        <div class="w1440">
            <div class="flex_fsw">
                <div class="MainLeft w72">
                    <div class="Info bgwhite">
                        <div class="InfoTit">
                            <div class="tit">{{ content.title }}
                                <!-- <i>讨论</i> -->
                            </div>
                            <div class="date pr">
                                <router-link tag="a" :to="'/otherInfo?uid='+content.userInfo?.uid" title="查看用户信息">
                                    <img class="avatar-img" src="../assets/uploadfiles/image/logo.png" alt="">
                                    <span class="corGreen">{{ content.userInfo?.username }}</span>
                                </router-link>
                                <span>{{ content.createTime }}</span>
                            </div>
                        </div>
                        <div class="SinglePage" v-html="content.content"></div>

                        <el-tabs v-model="activeTab">
                            <el-tab-pane :label="'评论（' + commentData.last_page + '）'" name="first">
                                <!-- 评论 s -->
                                <div class="comment-publish d-flex">
                                    <div class="head">
                                        <img src="../assets/uploadfiles/image/logo.png" alt="">
                                    </div>
                                    <div class="commentForm">
                                        <el-form ref="commentForm" :model="formData" :rules="rules">
                                            <!-- 评论内容 -->
                                            <el-form-item prop="content">
                                                <el-input v-model="formData.content" type="textarea" :rows="7"
                                                    placeholder="相逢即是缘，说点什么吧..." maxlength="200" show-word-limit />
                                            </el-form-item>

                                            <!-- 图片上传 -->
                                            <el-form-item class="uploadBox">
                                                <el-upload ref="uploadImage" accept="image/*"
                                                    :action="uploadApiUrl + '/app/common/upload'"
                                                    list-type="picture-card" v-model:file-list="fileList" name="Image"
                                                    :before-upload="beforeUpload" :on-success="handleSingleSuccess"
                                                    :on-error="handleError" :on-remove="handleRemove"
                                                    :on-preview="handlePictureCardPreview">
                                                    <div title="添加图片" class="upload-ico">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                            viewBox="0 0 24 24" fill="none">
                                                            <mask id="mask0_13695_313785" style="mask-type:alpha"
                                                                maskUnits="userSpaceOnUse" x="0" y="0" width="24"
                                                                height="24">
                                                                <rect width="24" height="24" fill="#D9D9D9"></rect>
                                                            </mask>
                                                            <g mask="url(#mask0_13695_313785)">
                                                                <path
                                                                    d="M13.7998 3.5V5H5.1248C5.0248 5 4.9458 5.02933 4.8878 5.088C4.82914 5.146 4.7998 5.21667 4.7998 5.3V18.7C4.7998 18.7833 4.82914 18.8543 4.8878 18.913C4.9458 18.971 5.0248 19 5.1248 19H18.4998C18.5831 19 18.6538 18.971 18.7118 18.913C18.7705 18.8543 18.7998 18.7833 18.7998 18.7V10H20.2998V18.7C20.2998 19.2 20.1248 19.625 19.7748 19.975C19.4248 20.325 18.9998 20.5 18.4998 20.5H5.1248C4.60814 20.5 4.1748 20.325 3.8248 19.975C3.4748 19.625 3.2998 19.2 3.2998 18.7V5.3C3.2998 4.8 3.4748 4.375 3.8248 4.025C4.1748 3.675 4.60814 3.5 5.1248 3.5H13.7998ZM18.6998 3.125V5.125H20.6998V6.625H18.6998V8.625H17.1998V6.625H15.1998V5.125H17.1998V3.125H18.6998ZM6.5498 16.75H17.1248L13.8498 12.375L11.0498 16.025L9.0498 13.45L6.5498 16.75Z"
                                                                    fill="#222222"></path>
                                                            </g>
                                                        </svg>
                                                    </div>
                                                </el-upload>
                                            </el-form-item>

                                            <!-- 图片预览对话框 -->
                                            <el-dialog v-model="dialogVisible" title="图片预览">
                                                <img :src="dialogImageUrl" class="preview-image" />
                                            </el-dialog>

                                            <!-- 提交按钮 -->
                                            <el-button type="primary" @click="submitForm" :loading="submitting"
                                                class="plBtn">
                                                评论
                                            </el-button>
                                        </el-form>
                                    </div>
                                </div>
                                <!-- 评论 e -->



                                <!-- 评论列表 s-->
                                <div class="comment-list">
                                    <div v-for="(item, index) in commentData.data" :key="index" class="group flex-aifs">
                                        <div class="head">
                                            <img src="../assets/uploadfiles/image/logo.png" alt="">
                                        </div>
                                        <div class="info flex1">
                                            <div class="name flex-row-aic-jcsb">
                                                <h3 class="h3">{{ item.userInfo?.username }}</h3>
                                                <div @click="addLike(item)" class="zan on">
                                                    <span class="img1" v-if="item.thumbs == '0' || item.thumbs == 0">赞</span>
                                                    <span class="img2" v-else>{{ item.thumbs }}</span>
                                                    <div class="icon">
                                                        <img v-if="item.isThumbs" src="../assets/images/zanc.svg"
                                                            class="img2" alt="">
                                                        <img v-else src="../assets/images/zan.svg" class="img1" alt="">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="d-flex j-sb messageBox">
                                                <div class="message">
                                                    {{ item.content }}
                                                    <img v-if="item.img" @click="handlePictureCardPreview(item.img)" title="点击查看大图" :src="item.img" alt="">
                                                </div>
                                                <!-- <div class="jbBtn" title="点击删除当前评论" @click="reportOpen">
                                                    <el-icon>
                                                        <Delete />
                                                    </el-icon>
                                                </div> -->
                                            </div>
                                            <div class="flex-aic state">
                                                <li>{{ item.createTime }}</li>
                                                <li v-if="item.uid != userInfoCommon.uid" @click="handleReplyContent(item, 1)" class="repaly">回复</li>
                                            </div>
                                            <!-- 回复评论 -->
                                            <div v-show="openReplyId == item.id" class="reply-comment mt15">
                                                <div class="commentForm">
                                                    <el-form ref="commentFormReply"
                                                        :model="formReplyData" :rules="rules">
                                                        <!-- 评论内容 -->
                                                        <el-form-item :class="'formId'+item.id" :data-form-id="item.id" prop="content">
                                                            <el-input v-model="formReplyData.content" type="textarea"
                                                                :rows="7" placeholder="请输入回复内容" maxlength="200"
                                                                show-word-limit />
                                                        </el-form-item>

                                                        <!-- 图片上传 -->
                                                        <el-form-item class="uploadBox">
                                                            <el-upload ref="uploadImage" accept="image/*"
                                                                :action="uploadApiUrl + '/app/common/upload'"
                                                                list-type="picture-card"
                                                                v-model:file-list="replyReplyFileList" name="Image"
                                                                :before-upload="beforeUploadReply"
                                                                :on-success="handleSingleSuccess"
                                                                :on-error="handleError" :on-remove="handleRemove"
                                                                :on-preview="handlePictureCardPreview">
                                                                <div title="添加图片" class="upload-ico">
                                                                    <svg xmlns="http://www.w3.org/2000/svg" width="24"
                                                                        height="24" viewBox="0 0 24 24" fill="none">
                                                                        <mask id="mask0_13695_313785"
                                                                            style="mask-type:alpha"
                                                                            maskUnits="userSpaceOnUse" x="0" y="0"
                                                                            width="24" height="24">
                                                                            <rect width="24" height="24" fill="#D9D9D9">
                                                                            </rect>
                                                                        </mask>
                                                                        <g mask="url(#mask0_13695_313785)">
                                                                            <path
                                                                                d="M13.7998 3.5V5H5.1248C5.0248 5 4.9458 5.02933 4.8878 5.088C4.82914 5.146 4.7998 5.21667 4.7998 5.3V18.7C4.7998 18.7833 4.82914 18.8543 4.8878 18.913C4.9458 18.971 5.0248 19 5.1248 19H18.4998C18.5831 19 18.6538 18.971 18.7118 18.913C18.7705 18.8543 18.7998 18.7833 18.7998 18.7V10H20.2998V18.7C20.2998 19.2 20.1248 19.625 19.7748 19.975C19.4248 20.325 18.9998 20.5 18.4998 20.5H5.1248C4.60814 20.5 4.1748 20.325 3.8248 19.975C3.4748 19.625 3.2998 19.2 3.2998 18.7V5.3C3.2998 4.8 3.4748 4.375 3.8248 4.025C4.1748 3.675 4.60814 3.5 5.1248 3.5H13.7998ZM18.6998 3.125V5.125H20.6998V6.625H18.6998V8.625H17.1998V6.625H15.1998V5.125H17.1998V3.125H18.6998ZM6.5498 16.75H17.1248L13.8498 12.375L11.0498 16.025L9.0498 13.45L6.5498 16.75Z"
                                                                                fill="#222222"></path>
                                                                        </g>
                                                                    </svg>
                                                                </div>
                                                            </el-upload>
                                                        </el-form-item>

                                                        <!-- 提交按钮 -->
                                                        <el-button type="primary" @click="submitFormReply(item.id)"
                                                            :loading="submittingReply" class="plBtn">
                                                            回复
                                                        </el-button>
                                                    </el-form>
                                                </div>
                                            </div>

                                            <!-- 回复列表s -->
                                            <div v-for="(reply, replyIndex) in item.children" :key="replyIndex"
                                                class="answer">
                                                <div class="item flex-aifs">
                                                    <div class="head">
                                                        <img src="../assets/uploadfiles/image/logo.png" alt="">
                                                    </div>
                                                    <div class="info flex1">
                                                        <div class="name flex-row-aic-jcsb">
                                                            <div class="h3">
                                                                <p
                                                                    style="display: inline-block;margin-right: 10px;cursor: pointer;">
                                                                    {{ reply.userInfo?.username }}</p>
                                                                <i v-if="reply.commentTyp == 2">回复</i>
                                                                <p
                                                                    v-if="reply.commentTyp == 2"
                                                                    style="display: inline-block;margin-left: 10px;cursor: pointer;">
                                                                    {{ reply.toUser?.username }}</p>
                                                            </div>
                                                            <div @click="addLike(reply)" class="zan on">
                                                                <span class="img1" v-if="reply.thumbs == '0' || reply.thumbs == 0">赞</span>
                                                                <span class="img2" v-else>{{ reply.thumbs }}</span>
                                                                <div class="icon">
                                                                    <img v-if="reply.isThumbs"
                                                                        src="../assets/images/zanc.svg" class="img2"
                                                                        alt="">
                                                                    <img v-else src="../assets/images/zan.svg"
                                                                        class="img1" alt="">
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <div class="d-flex j-sb messageBox">
                                                            <div class="message">
                                                                {{ reply.content }}
                                                                <img v-if="reply.img" @click="handlePictureCardPreview(item.img)" title="点击查看大图" :src="reply.img"
                                                                    alt="">
                                                            </div>
                                                            <!-- <div class="jbBtn" title="点击删除当前评论" @click="reportOpen">
                                                                <el-icon>
                                                                    <Delete />
                                                                </el-icon>
                                                            </div> -->
                                                        </div>
                                                        <div class="flex-aic state">
                                                            <li>{{ reply.createTime }}</li>
                                                            <li v-if="reply.uid != userInfoCommon.uid" @click="handleReplyContent(reply, 2, item.id)" class="repaly">回复</li>
                                                        </div>
                                                        <!-- 回复评论 -->
                                                        <div v-show="openReplyId == reply.id"
                                                            class="reply-comment mt15">
                                                            <div class="commentForm">
                                                                <el-form ref="commentFormReply" 
                                                                    :model="formReplyData" :rules="rules">
                                                                    <!-- 评论内容 -->
                                                                    <el-form-item :class="'formId'+reply.id" :data-form-id="reply.id" prop="content">
                                                                        <el-input v-model="formReplyData.content"
                                                                            type="textarea" :rows="7" placeholder="请输入回复内容"
                                                                            maxlength="200" show-word-limit />
                                                                    </el-form-item>

                                                                    <!-- 图片上传 -->
                                                                    <el-form-item class="uploadBox">
                                                                        <el-upload ref="uploadImage" accept="image/*"
                                                                            :action="uploadApiUrl + '/app/common/upload'"
                                                                            list-type="picture-card"
                                                                            v-model:file-list="replyReplyFileList"
                                                                            name="Image"
                                                                            :before-upload="beforeUploadReply"
                                                                            :on-success="handleSingleSuccess"
                                                                            :on-error="handleError"
                                                                            :on-remove="handleRemove"
                                                                            :on-preview="handlePictureCardPreview">
                                                                            <div title="添加图片" class="upload-ico">
                                                                                <svg xmlns="http://www.w3.org/2000/svg"
                                                                                    width="24" height="24"
                                                                                    viewBox="0 0 24 24" fill="none">
                                                                                    <mask id="mask0_13695_313785"
                                                                                        style="mask-type:alpha"
                                                                                        maskUnits="userSpaceOnUse" x="0"
                                                                                        y="0" width="24" height="24">
                                                                                        <rect width="24" height="24"
                                                                                            fill="#D9D9D9">
                                                                                        </rect>
                                                                                    </mask>
                                                                                    <g mask="url(#mask0_13695_313785)">
                                                                                        <path
                                                                                            d="M13.7998 3.5V5H5.1248C5.0248 5 4.9458 5.02933 4.8878 5.088C4.82914 5.146 4.7998 5.21667 4.7998 5.3V18.7C4.7998 18.7833 4.82914 18.8543 4.8878 18.913C4.9458 18.971 5.0248 19 5.1248 19H18.4998C18.5831 19 18.6538 18.971 18.7118 18.913C18.7705 18.8543 18.7998 18.7833 18.7998 18.7V10H20.2998V18.7C20.2998 19.2 20.1248 19.625 19.7748 19.975C19.4248 20.325 18.9998 20.5 18.4998 20.5H5.1248C4.60814 20.5 4.1748 20.325 3.8248 19.975C3.4748 19.625 3.2998 19.2 3.2998 18.7V5.3C3.2998 4.8 3.4748 4.375 3.8248 4.025C4.1748 3.675 4.60814 3.5 5.1248 3.5H13.7998ZM18.6998 3.125V5.125H20.6998V6.625H18.6998V8.625H17.1998V6.625H15.1998V5.125H17.1998V3.125H18.6998ZM6.5498 16.75H17.1248L13.8498 12.375L11.0498 16.025L9.0498 13.45L6.5498 16.75Z"
                                                                                            fill="#222222"></path>
                                                                                    </g>
                                                                                </svg>
                                                                            </div>
                                                                        </el-upload>
                                                                    </el-form-item>

                                                                    <!-- 提交按钮 -->
                                                                    <el-button type="primary"
                                                                        @click="submitFormReply(reply.id, item.id)"
                                                                        :loading="submittingReply" class="plBtn">
                                                                        回复
                                                                    </el-button>
                                                                </el-form>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- 回复列表 e -->


                                        </div>
                                    </div>
                                </div>
                                <!-- 评论列表 e -->
                            </el-tab-pane>

                            <el-tab-pane v-if="content.type == 4" label="我要投票" name="second">

                                <!-- 单选时显示 -->
                                <div class="InfoToupiao mb40">
                                    <div class="tit">投票-选择你心目中适合居住的城市 <span>单选</span></div>
                                    <div class="InfoToupiaoBox">
                                        <ul>
                                            <li class="on">
                                                <a href="javascript:void(0);">合肥</a>
                                            </li>
                                            <li>
                                                <a href="javascript:void(0);">武汉</a>
                                            </li>
                                            <li>
                                                <a href="javascript:void(0);">上海</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>

                                <!-- 多选时显示 -->
                                <div class="InfoToupiao mb40">
                                    <div class="tit">投票-选择你心目中适合居住的城市 <span>多选</span></div>
                                    <div class="InfoToupiaoBox">
                                        <ul>
                                            <li class="on">
                                                <a href="javascript:void(0);">合肥</a>
                                            </li>
                                            <li class="on">
                                                <a href="javascript:void(0);">武汉</a>
                                            </li>
                                            <li>
                                                <a href="javascript:void(0);">上海</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>

                            </el-tab-pane>
                        </el-tabs>
                    </div>

                </div>
                <div class="MainLeftRight  w26">
                    <div class="HomePerson HomePerson_1 bgwhite mb15">
                        <router-link tag="a" :to="'/otherInfo?uid='+content.userInfo?.uid" class="d-block" title="查看用户信息">
                        <div class="HomePersonName">
                            <div class="img">
                                <div class="imgbox">
                                    <span><img src="../assets/uploadfiles/image/logo.png" alt="头像"></span>
                                </div>
                                <div class="vip" v-if="content.userInfo?.vip"></div>
                            </div>
                            <div class="txt">
                                <div class="name">{{ content.userInfo?.username }} <span><img
                                            src="../assets/images/zhuan.svg" alt="">
                                        {{ content.userInfo?.level }}</span>
                                </div>
                                <div class="dec">{{ content.userInfo?.intro }}</div>
                            </div>
                        </div>
                    </router-link>
                        <div class="Pgzbtn" v-if="userInfoCommon.uid !== content.userInfo?.uid">
                            <a class="pointer" @click="followUser(content.userInfo)">{{content.userInfo?.isFollow ? '取消关注' : '+ 关注'}}</a></div>
                    </div>
                    <div class="Ranking bgwhite mb15">
                        <div class="HomeTit HomeTit_border">
                            <div class="tit">TA的发帖</div>
                        </div>
                        <div class="RankingBox">
                            <ul>
                                <li v-for="(item, index) in someoneList" :ket="index" class="dot">
                                    <router-link :to="'/commentpost?id=' + item.id" tag="a"><i>{{index+1}}</i>{{item.title}}</router-link>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!-- 热门帖子 -->
                    <HotPost />
                </div>
            </div>
        </div>
    </div>

</template>
<script setup name="CommentPost">
import { postApi, commentApi, userApi } from '@/api';
import { computed, ref, reactive, onBeforeMount, onMounted, watch } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { useCommonStore } from '@/store/Common';
import { storeToRefs } from 'pinia';
import HotPost from '@/components/HotPost.vue'; // 热门帖子

// 路由
const router = useRouter();

// 公共store
const commonStore = useCommonStore();
// 读取 store 中的内容
const { userInfoCommon } = storeToRefs(commonStore);

/**
 * @name Data
 */
const activeTab = ref('first');
const formData = ref({
    pid: 0,
    type: 1,
    toUid: 0,
    postId: 0,
    content: '',
    img: '',
    commentTyp: 1, // 评论类型 1.直接评论 2.回复
})
const rules = reactive({
    content: [
        { required: true, message: '请填写评论内容', trigger: 'blur' }
    ]
})
const commentForm = ref(null);
const submitting = ref(false);
const currentReplyId = ref(0); // 当前打开的回复框的ID
const loading = ref(true); // 加载中
/**
 * @name 提交表单
 * @param {*} pid 父级评论id
 * @param {*} toUid 被回复用户ID
 */
const submitForm = (pid = 0, toUid = 0) => {
    commentForm.value.validate((valid) => {
        if (valid) {
            submitting.value = true;
            // 如果有图片上传，将图片地址赋值给formData.img
            if (fileList.value.length > 0) {
                formData.value.img = fileList.value[0].response.result;
            }
            formData.value.postId = router.currentRoute.value.query.id;
            commentApi.addComment(formData.value).then((res) => {
                ElMessage.success('评论成功，待管理员审核后展示');
                submitting.value = false;
                commentForm.value.resetFields();
                fileList.value = [];
                formData.value = {
                    pid: 0,
                    type: 1,
                    toUid: 0,
                    postId: 0,
                    content: '',
                    img: '',
                    commentTyp: 1,
                }
                // 更新评论列表
                getCommentList()
            }).catch((err) => { })
        } else {
            ElMessage.error('请填写评论内容');
            return false;
        }
    });
}

/**
 * @name 回复
 */
const replyReplyFileList = ref([]);
const commentFormReply = ref(null);
const submittingReply = ref(false);
const formReplyData = ref({
    pid: 0,
    type: 1,
    toUid: 0,
    postId: 0,
    content: '',
    img: '',
    commentTyp: 0,
})
/**
 * @name 提交表单
 * @param {*} id 表单id
 */
const submitFormReply = (id) => {
    let formIndex = 0;
    // 获取当前表单的下标
    commentFormReply.value.forEach((item, index) => {
        if(id == item.fields[0].$el.dataset.formId) {
            formIndex = index;
        }
    })
    commentFormReply.value[formIndex].validate((valid) => {
        if (valid) {
            submittingReply.value = true;
            // 如果有图片上传，将图片地址赋值给formData.img
            if (replyReplyFileList.value.length > 0) {
                formReplyData.value.img = replyReplyFileList.value[0].response.result;
            }
            // 帖子id
            formReplyData.value.postId = router.currentRoute.value.query.id;
            // console.log(formReplyData.value, 'formReplyData');
            // return false;
            commentApi.addComment(formReplyData.value).then((res) => {
                ElMessage.success('回复成功，待管理员审核后展示');
                commentFormReply.value[formIndex].resetFields();
                replyReplyFileList.value = [];
                openReplyId.value = 0; // 关闭回复框
                formReplyData.value = {
                    pid: 0,
                    type: 1,
                    toUid: 0,
                    postId: 0,
                    content: '',
                    img: '',
                    commentTyp: 0,
                }
                // 更新评论列表
                getCommentList()
            }).catch((err) => { }).finally(() => {
                submittingReply.value = false;
            })
        } else {
            ElMessage.error('请填写回复内容');
            return false;
        }
    });
}
/**
 * @name 获取评论列表
 */
const listPage = ref(1);
const commentData = ref({
    last_page: 0,
});
const openReplyId = ref(0); // 记录当前打开的回复框的ID
const getCommentList = () => {
    let { id } = router.currentRoute.value.query;
    commentApi.getCommentList({ id, page: listPage.value }).then((res) => {
        commentData.value = res.result;
    }).catch((err) => { })
}

/**
 * @name 回复评论
 * @param {*} item 当前评论数据
 * @param {*} type 类型 1.直接评论 2.回复
 * @param {*} pid 父级评论id
 */
const handleReplyContent = (item, type, pid=0) => {
    // 如果当前打开的回复框的ID与当前评论的ID相同，则关闭回复框
    if (openReplyId.value == item.id) {
        openReplyId.value = 0;
        formReplyData.value = {
            pid: 0,
            type: 1,
            toUid: 0,
            postId: 0,
            content: '',
            img: '',
            commentTyp: 0,
        }
        return;
    }
    openReplyId.value = item.id; // 打开回复框
    formReplyData.value.pid = pid == 0 ? item.id : pid; // 设置回复的父级ID
    formReplyData.value.toUid = item.userInfo.uid; // 设置被回复的用户ID
    formReplyData.value.commentTyp = type; // 设置评论类型
}

/**
 * @name 点赞
 * @param {*} item 当前评论数据
 */
const addLike = (item) => {
    if (item.isThumbs) {
        // 取消点赞
        commentApi.cancelLike({ id: item.id }).then((res) => {
            item.isThumbs = false;
            item.thumbs = Number(item.thumbs) - 1;
        })
    } else {
        // 点赞
        commentApi.addLike({ id: item.id }).then((res) => {
            item.thumbs = Number(item.thumbs) + 1;
            item.isThumbs = true;
        })
    }

}

/**
 * @name 关注用户
 */
// 关注用户
const followUser = (item) => {
    if(item.isFollow) {
        // 取消关注
        userApi.followCancel({id: item.uid}).then((res) => {
            item.isFollow = false;
            ElMessage.success('已取消关注');
        }).catch(err => {});
    }else{
        // 关注用户
        userApi.followAdd({id: item.uid}).then((res) => {
            item.isFollow = true;
            ElMessage.success('已关注');
        }).catch(err => {});
    }
    
}

/**
 * @name 上传图片
 */
const fileList = ref([]);
const dialogVisible = ref(false);
const dialogImageUrl = ref('');
// 查看图片
const handlePictureCardPreview = (image) => {
    dialogImageUrl.value = image.url && image.url !== null ? image.url : image; // 存储图片地址
    dialogVisible.value = true; // 显示大图弹窗
}
// 验证图片
const beforeUpload = (file) => {
    const isJPGorPNG = file.type === 'image/jpeg' || file.type === 'image/png'
    const isLt5M = file.size / 1024 / 1024 < 2;
    if (!isJPGorPNG) {
        ElMessage.error('只能上传 JPEG/JPG/PNG 格式的图片!')
        return false
    }
    if (!isLt5M) {
        ElMessage.error('图片大小不能超过 2MB!')
        return false
    }
    if (fileList.value.length >= 1) {
        ElMessage.error('图片数量超过限制!')
        return false
    }
    return true
}

// 验证图片
const beforeUploadReply = (file) => {
    const isJPGorPNG = file.type === 'image/jpeg' || file.type === 'image/png'
    const isLt5M = file.size / 1024 / 1024 < 2;
    if (!isJPGorPNG) {
        ElMessage.error('只能上传 JPEG/JPG/PNG 格式的图片!')
        return false
    }
    if (!isLt5M) {
        ElMessage.error('图片大小不能超过 2MB!')
        return false
    }
    if (replyReplyFileList.value.length >= 1) {
        ElMessage.error('图片数量超过限制!')
        return false
    }
    return true
}
// 图片改变隐藏提示
const handleCoverTypeChange = () => {

}

// 图片上传失败
const handleError = (err, file, fileList) => {
    console.log(err);
    ElMessage.error('上传失败，请重试！');
}

// 图片移除
const handleRemove = (file, fileList) => {
    console.log('remove')
}

// 单图上传成功
const handleSingleSuccess = (response, file, fileList) => {
    if (response.code == 200 || response.code == 0) {

    } else {
        ElMessage.error(response.msg);
        // 上传失败处理逻辑
        const index = fileList.value.findIndex(f => f.uid === file.uid);
        if (index !== -1) {
            fileList.value.splice(index, 1);
        }
    }
}


/**
* @name 计算属性
*/
// 上传接口地址
const uploadApiUrl = computed(() => import.meta.env.VITE_BASE_API);

/**
 * @name 更新数据
 */
const updatePage = () => {
    getPostDetail()
    getCommentList()
}


/**
* @name 生命周期
*/
onBeforeMount(() => {
    getPostDetail()
    getCommentList()
})


/**
 * @name 方法
 */

/**
 * @name 获取帖子详情
 */
const content = ref({});
const someoneList = ref([]);
const someonePrame = reactive({
    pageNo: 1,
    pageSize: 10,
    uid: ''
})
const getPostDetail = () => {
    loading.value = true;
    let { id } = router.currentRoute.value.query;
    postApi.getPostDetail(id).then((res) => {
        content.value = res.result;
        someonePrame.uid = res.result.userInfo.uid;
        // 改变网页标题
        document.title = res.result.title;
        postApi.getSomeoneList(someonePrame).then((result) => {
            someoneList.value = result.result.list;
        })
    }).catch((err) => { }).finally(() => {
        loading.value = false;
    })
}

 // 监听查询参数变化
 watch(() => router.currentRoute.value.query, () => {
    updatePage();
 })

</script>

<style lang="less" scoped>
.el-form {
    width: 100%;
}

.commentForm {
    width: 100%;
    position: relative;
    background-color: #f8f8f8;
    border-radius: 6px;
    padding: 16px;
}

.plBtn {
    width: 64px;
    line-height: 32px;
    border-radius: 2px;
    background: #c6c6c6;
    color: #fff;
    border-color: #c6c6c6;
    position: absolute;
    right: 16px;
    bottom: 16px;
}

:deep(.el-textarea__inner) {
    box-shadow: none !important;
    background-color: transparent;
    padding: 0;
}

:deep(.el-upload--picture-card) {
    width: 35px;
    height: 35px;
    vertical-align: middle;
    border: none;
    position: absolute;
    left: 0;
    bottom: -30px;
}

.upload-ico {
    display: flex;
    align-items: center;
}

.uploadBox :deep(.el-upload-list__item) {
    margin-bottom: 30px;
}

:deep(.preview-image) {
    display: block;
    margin: 0 auto;
}

.message img {
    max-width: 100px;
    display: block;
    margin-top: 10px;
    cursor: zoom-in;
}

.reporDialog :deep(.el-checkbox-button__inner) {
    width: 100%;
    height: 40px;
    line-height: 40px;
    border-radius: 40px;
    padding: 0;
    border: none;
    box-shadow: none;
}

.reporDialog .el-checkbox-button.is-checked {
    border: 1px solid #00753e;
}

.reporDialog .el-checkbox-button.is-checked :deep(.el-checkbox-button__inner) {
    background: rgba(0, 117, 62, 0.1);
    color: #00753e;
}

.reporDialog .el-checkbox-button:hover :deep(.el-checkbox-button__inner) {
    background: rgba(0, 117, 62, 0.1);
    color: #00753e;
}

:deep(.el-carousel__container) {
    height: 355px;
}

:deep(.el-tabs__item) {
    font-size: 20px;
    color: #666;
    padding-bottom: 10px;
}

:deep(.el-tabs__item.is-active) {
    color: #333;
}

:deep(.el-tabs__active-bar) {
    background-color: #00753e;
}

.el-tabs {
    margin-top: 30px;
}
.Info .InfoTit .date {
    img{
        width: 30px;
        height: 30px;
        border-radius: 50%;
        margin-right: 10px;
    }
}
</style>